/*
  ============================================================
  ARCHIVO: style.css
  EMPRESA: TRANSPORTES MONTERO LARA
  DESCRIPCIÓN: Hoja de estilos principal. Diseño minimalista,
               elegante, responsivo (mobile-first) y moderno.

  ESTRUCTURA DE ESTE ARCHIVO:
  1. Variables CSS (colores, fuentes, espaciados)
  2. Reset y estilos base
  3. Componentes reutilizables (botones, formularios)
  4. Navbar
  5. Hero Section
  6. Sección Vehículos
  7. Sección Galería
  8. Sección Políticas
  9. Cotizador
  10. Sección Contacto
  11. Footer
  12. Botón flotante WhatsApp
  13. Media Queries (responsivo)
  ============================================================
*/


/* ============================================================
   1. VARIABLES CSS GLOBALES
   Aquí defines la paleta de colores y tipografías del sitio.
   Al cambiar un valor aquí, se actualiza en toda la página.
   ============================================================ */
:root {
  /* ── PALETA DE COLORES PRINCIPAL ── */

  /* Fondos: blanco roto y grises muy suaves */
  --color-bg:           #F7F8FA;  /* Fondo principal de la página */
  --color-bg-alt:       #FFFFFF;  /* Fondo de tarjetas y secciones alternadas */
  --color-bg-section:   #EFF2F5;  /* Fondo de secciones con contraste suave */

  /* Azul pizarra: color principal de acento (botones, íconos, bordes activos) */
  --color-primary:      #4A7FA5;  /* Azul principal — elegante y profesional */
  --color-primary-lt:   #EBF3F9;  /* Versión muy clara del azul (fondos de íconos) */
  --color-primary-dk:   #3A6A8E;  /* Versión más oscura para hover de botones */

  /* Color secundario: tono dorado/arena muy suave para destacar */
  --color-secondary:    #8BA888;  /* Verde salvia suave — serenidad y naturaleza */
  --color-secondary-lt: #EDF2ED;  /* Versión clara del verde para fondos */

  /* Textos */
  --color-text:         #2C3E50;  /* Texto principal — casi negro, no agresivo */
  --color-text-muted:   #7F8C8D;  /* Texto secundario — gris medio */
  --color-text-light:   #BDC3C7;  /* Texto muy suave — notas al pie, hints */

  /* Bordes y divisores */
  --color-border:       #E2E8F0;  /* Bordes de tarjetas y separadores */
  --color-border-focus: #4A7FA5;  /* Borde azul al hacer focus en inputs */

  /* Estados */
  --color-success:      #5CB85C;  /* Verde para mensajes de éxito */
  --color-error:        #D9534F;  /* Rojo suave para errores de validación */

  /* ── TIPOGRAFÍAS ── */
  --font-display:  'Playfair Display', Georgia, serif; /* Para títulos grandes */
  --font-body:     'Inter', -apple-system, sans-serif; /* Para texto corriente */

  /* ── ESCALA DE TAMAÑOS DE FUENTE ── */
  --text-xs:   0.75rem;   /* 12px — notas muy pequeñas */
  --text-sm:   0.875rem;  /* 14px — labels y hints */
  --text-base: 1rem;      /* 16px — texto base del cuerpo */
  --text-lg:   1.125rem;  /* 18px — párrafos destacados */
  --text-xl:   1.25rem;   /* 20px — subtítulos */
  --text-2xl:  1.5rem;    /* 24px — títulos de tarjetas */
  --text-3xl:  1.875rem;  /* 30px — títulos de sección */
  --text-4xl:  2.25rem;   /* 36px — títulos grandes */
  --text-5xl:  3rem;      /* 48px — título del hero */
  --text-6xl:  3.75rem;   /* 60px — hero en pantallas grandes */

  /* ── ESPACIADOS CONSISTENTES ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── BORDES REDONDEADOS ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;  /* Para pastillas y badges circulares */

  /* ── SOMBRAS ── */
  --shadow-sm:  0 1px 3px rgba(44, 62, 80, 0.08), 0 1px 2px rgba(44, 62, 80, 0.04);
  --shadow-md:  0 4px 12px rgba(44, 62, 80, 0.10), 0 2px 6px rgba(44, 62, 80, 0.06);
  --shadow-lg:  0 10px 30px rgba(44, 62, 80, 0.12), 0 4px 10px rgba(44, 62, 80, 0.06);
  --shadow-xl:  0 20px 50px rgba(44, 62, 80, 0.15);

  /* ── TRANSICIONES ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── ANCHO MÁXIMO DEL CONTENEDOR ── */
  --container-max: 1200px;
  --container-pad: var(--space-6); /* Padding lateral del contenedor */

  /* ── ALTURA DE LA NAVBAR ── */
  --navbar-h: 72px;
}


/* ============================================================
   2. RESET Y ESTILOS BASE
   Normaliza el comportamiento por defecto del navegador.
   ============================================================ */

/* Box-sizing: hace que padding y border no sumen al tamaño del elemento */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Scroll suave global para todos los saltos de ancla (#sección) */
html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base para cálculos en rem */
}

/* Estilos base del cuerpo de la página */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* Fuentes más nítidas en Mac/iOS */
  overflow-x: hidden; /* Evita scroll horizontal accidental */
  overflow-y: auto;
}

/* Elimina el estilo por defecto de las listas */
ul, ol { list-style: none; }

/* Elimina el subrayado y hereda el color de texto en los enlaces */
a {
  text-decoration: none;
  color: inherit;
}

/* Imágenes responsivas por defecto */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Botones: elimina el estilo nativo del navegador */
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

/* Inputs y select: hereda la fuente del body */
input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
}


/* ============================================================
   3. COMPONENTES REUTILIZABLES
   ============================================================ */

/* ── CONTENEDOR CENTRADO ── */
/* Se usa en todas las secciones para limitar el ancho y centrar el contenido */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ── CLASE UTILITARIA: OCULTAR ELEMENTO ── */
/* Se agrega/quita desde JavaScript para mostrar/ocultar secciones */
.hidden {
  display: none !important;
}

/* ── CABECERA DE SECCIÓN GENÉRICA ── */
/* Aplica a todas las secciones: eyebrow, título y descripción */
.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Etiqueta pequeña sobre el título (ej: "Nuestra Flota") */
.section__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-primary-lt);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* Título principal de cada sección */
.section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: var(--space-4);
}

/* Descripción debajo del título de sección */
.section__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ── SISTEMA DE BOTONES ── */

/* Botón base: aplica a todos los botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

/* Botón primario: azul principal, para acciones principales */
.btn--primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border: 2px solid var(--color-primary);
}
.btn--primary:hover {
  background-color: var(--color-primary-dk);
  border-color: var(--color-primary-dk);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Botón secundario: gris suave para acciones secundarias */
.btn--secondary {
  background-color: var(--color-secondary);
  color: #FFFFFF;
  border: 2px solid var(--color-secondary);
}
.btn--secondary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Botón fantasma: transparente con borde blanco (para el hero sobre fondo oscuro) */
.btn--ghost {
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #FFFFFF;
}

/* Botón con solo borde (para tarjetas de vehículos) */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn--outline:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

/* Botón cancelar: gris neutro discreto */
.btn--cancel {
  background-color: transparent;
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
}
.btn--cancel:hover {
  background-color: #FEF2F2;
  color: #991B1B;
  border-color: #FCA5A5;
}

/* Modificadores de tamaño */
.btn--sm  { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg  { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }

/* Estado deshabilitado del botón */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── ESTILOS DE FORMULARIOS ── */

/* Grupo de campo (label + input) */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Etiqueta del campo */
.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.form-label i {
  color: var(--color-primary);
  font-size: 0.875rem;
}

/* Input de texto, número, email, datetime */
.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none; /* Elimina el estilo nativo en algunos navegadores */
}
.form-input:focus {
  outline: none; /* Quitamos el feo borde azul nativo */
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(74, 127, 165, 0.12);
}
.form-input::placeholder {
  color: var(--color-text-light);
}

/* Texto de ayuda debajo del input */
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}


/* ============================================================
   4. NAVBAR (BARRA DE NAVEGACIÓN)
   ============================================================ */

/* Contenedor principal de la navbar */
.navbar {
  position: fixed;       /* Se queda fija al hacer scroll */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;         /* Siempre encima del resto del contenido */
  height: var(--navbar-h);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);     /* Efecto de vidrio esmerilado moderno */
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-normal);
}

/* Cuando el usuario hace scroll, se agrega esta clase desde JS */
.navbar--scrolled {
  box-shadow: var(--shadow-md);
}

/* Interior de la navbar: flex para alinear logo y menú */
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-8);
}

/* Logo / nombre de la empresa */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0; /* Evita que el logo se encoja en pantallas pequeñas */
}

/* Ícono decorativo del logo */
.navbar__logo-icon {
  color: var(--color-primary);
  font-size: 1.25rem;
}

/* Texto del logo */
.navbar__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

/* Menú de navegación (contenedor del ul y el CTA) */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Lista de enlaces del menú */
.navbar__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Enlace individual del menú */
.navbar__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.navbar__link:hover,
.navbar__link.active {
  color: var(--color-primary);
  background-color: var(--color-primary-lt);
}

/* Botón CTA de la navbar ("Cotizar Viaje") */
.navbar__cta {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
}

/* Botón hamburguesa para menú móvil (oculto en desktop) */
.navbar__toggle {
  display: none; /* Oculto en pantallas grandes */
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
}
/* Las 3 líneas del ícono hamburguesa */
.navbar__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-normal);
}


/* ============================================================
   5. HERO SECTION
   ============================================================ */

/* La sección hero ocupa toda la altura de la pantalla */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--navbar-h); /* Compensa la altura de la navbar fija */

  /*
    ──────────────────────────────────────────────────
    IMAGEN DE FONDO DEL HERO:
    Reemplaza la URL de gradiente con tu imagen real.
    Tamaño recomendado: 1920px × 1080px
    Formatos: JPG, WebP (WebP es más liviano)
    Ejemplo: background-image: url('img/hero-bg.jpg');
    La imagen debe transmitir movimiento y elegancia:
    carretera de noche, Santiago desde el aire, etc.
    ──────────────────────────────────────────────────
  */
  background-image: url('../img/PrincipalIMMG.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Efecto parallax suave */
}

/* Overlay semitransparente sobre la imagen de fondo */
/* Asegura legibilidad del texto blanco sin importar la imagen */
.hero__overlay {
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background: linear-gradient(
    135deg,
    rgba(26, 42, 58, 0.75) 0%,
    rgba(44, 62, 80, 0.55) 60%,
    rgba(74, 127, 165, 0.30) 100%
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Contenido del hero (texto y botones) */
.hero__content {
  position: relative; /* Sobre el overlay */
  z-index: 1;
  max-width: 750px;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Etiqueta bilingüe sobre el título */
.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

/* Título principal del hero */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

/* Cursiva en "de Santiago" para diferenciación tipográfica */
.hero__title em {
  font-style: italic;
  color: #A8C8E0; /* Azul claro suave: variante pastel del color primario */
}

/* Subtítulo bilingüe */
.hero__subtitle {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  margin-bottom: var(--space-2);
}

/* Segunda línea de impacto */
.hero__tagline {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-8);
}

/* Contenedor de los dos botones de acción */
.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

/* Indicadores de confianza en la parte inferior del hero */
.hero__trust {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Cada indicador de confianza */
.hero__trust span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.70);
}

.hero__trust i {
  color: #A8C8E0; /* Ícono en azul claro */
  font-size: 0.875rem;
}


/* ============================================================
   6. SECCIÓN DE VEHÍCULOS
   ============================================================ */

/* Fondo alternado para diferenciar secciones */
.vehicles {
  background-color: var(--color-bg-alt);
}

/* Cuadrícula de 3 columnas para las tarjetas de vehículos */
.vehicles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ── TARJETA DE VEHÍCULO ── */
.vehicle-card {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden; /* Para que la imagen respete el border-radius */
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

/* Efecto al pasar el cursor sobre la tarjeta */
.vehicle-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Tarjeta destacada (Van — "Recomendado") */
.vehicle-card--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  position: relative;
}

/* Contenedor de la imagen del vehículo */
.vehicle-card__img-wrap {
  position: relative;
  width: 100%;
  height: 220px;   /* Altura fija de la imagen en la tarjeta */
  overflow: hidden;
  background-color: var(--color-bg-section); /* Fondo gris mientras carga */
}

/* Imagen del vehículo */
.vehicle-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta la imagen para que llene el contenedor */
  transition: transform var(--transition-slow);
}
.vehicle-card:hover .vehicle-card__img {
  transform: scale(1.04); /* Pequeño zoom al hacer hover */
}

/* Placeholder si la imagen no existe aún */
.vehicle-card__img-wrap--placeholder {
  background: linear-gradient(135deg, var(--color-bg-section) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vehicle-card__img-wrap--placeholder::after {
  content: '🚗'; /* Ícono temporal hasta colocar la foto real */
  font-size: 3rem;
  opacity: 0.3;
}

/* Badge/etiqueta sobre la imagen (Popular, Recomendado, Premium) */
.vehicle-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

/* Badge azul para la tarjeta destacada */
.vehicle-card__badge--featured {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

/* Cuerpo de la tarjeta (texto y specs) */
.vehicle-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1; /* Hace que todas las tarjetas tengan la misma altura */
}

/* Nombre del vehículo */
.vehicle-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

/* Descripción corta */
.vehicle-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Lista de características (capacidad, maletas, etc.) */
.vehicle-card__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vehicle-card__specs li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.vehicle-card__specs i {
  width: 16px;
  color: var(--color-primary);
  font-size: 0.8rem;
}

/* Botón de la tarjeta (empujado al fondo con margin-top: auto) */
.vehicle-card__body .btn {
  margin-top: auto;
}


/* ============================================================
   7. GALERÍA DE VIAJES
   ============================================================ */

.gallery {
  background-color: var(--color-bg-section);
}

/* Grid asimétrico — visible solo en desktop */
.gallery__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-3);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* ── ÍTEM DE GALERÍA ── */
.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--color-bg-section);
  min-height: 250px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item--large {
  grid-row: span 2;
  min-height: 500px;
}

.gallery-item--tall {
  grid-row: span 2;
  min-height: 500px;
}

.gallery-item--placeholder {
  background: linear-gradient(135deg, var(--color-bg-section), var(--color-border));
  min-height: 250px;
}
.gallery-item--placeholder::after {
  content: '📷';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  opacity: 0.2;
}

.gallery-item__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(26, 42, 58, 0.75));
  color: #FFFFFF;
  padding: var(--space-6) var(--space-4) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.gallery-item:hover .gallery-item__label {
  opacity: 1;
}

.gallery-item__label i {
  font-size: 0.875rem;
}

/* Slider — oculto en desktop */
.gallery__slider-wrap {
  display: none;
}

.gallery__arrow,
.gallery__dots {
  display: none;
}

/* ============================================================
   8. SECCIÓN POLÍTICAS Y GARANTÍAS
   ============================================================ */

.policies {
  background-color: var(--color-bg-alt);
}

/* Grid de 3 columnas para las tarjetas de política */
.policies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ── TARJETA DE POLÍTICA ── */
.policy-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.policy-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Ícono de la política */
.policy-card__icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary-lt);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}

/* Título de la política */
.policy-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

/* Texto de la política */
.policy-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Partes bilingües en cursiva dentro del texto */
.policy-card__text em {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-style: italic;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}


/* ============================================================
   9. COTIZADOR INTELIGENTE
   ============================================================ */

.quoter {
  background-color: var(--color-bg-section);
}

/* ── SEGUNDA FILA DEL COTIZADOR: pasajeros y maletas ── */
.quoter__extras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.number-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.number-input__btn {
  width: 38px;
  height: 42px;
  background: var(--color-bg-section);
  border: none;
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-input__btn:hover {
  background: var(--color-primary-lt);
  color: var(--color-primary);
}

.number-input__field {
  border: none !important;
  box-shadow: none !important;
  text-align: center;
  font-weight: 600;
  padding: var(--space-2) var(--space-1) !important;
  width: 100%;
  background: transparent;
  appearance: textfield;
}

.number-input__field::-webkit-outer-spin-button,
.number-input__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quoter__note {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quoter__note-input {
  resize: none;
  line-height: 1.6;
}

.form-label__opcional {
  font-weight: 400;
  color: var(--color-text-light);
  font-size: var(--text-xs);
  margin-left: var(--space-1);
}


/* Tarjeta principal del cotizador: más ancha para alojar el mapa */
.quoter__card {
  max-width: 960px;
  margin: 0 auto;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

/* Cuadrícula: origen + destino + botón calcular */
.quoter__fields {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  align-items: end;
}

/* Grupo con el botón de calcular */
.form-group--action {
  min-width: 150px;
}

/* Botón ocupa el 100% del form-group */
.btn--full {
  width: 100%;
  justify-content: center;
}

/* ── MAPA DE GOOGLE MAPS ── */
.quoter__map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.4s ease;
}

/* El div del mapa necesita altura fija para que Google Maps lo renderice */
.quoter__map {
  width: 100%;
  height: 380px;
  display: block;
  background-color: var(--color-bg-section);
}

/* Panel de estadísticas debajo del mapa */
.quoter__route-info {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Cada stat: ícono + label + valor */
.route-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.route-stat > i {
  font-size: 1.1rem;
  color: var(--color-primary);
  width: 20px;
  text-align: center;
}

.route-stat > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.route-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.route-stat__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-display);
}

/* ── SELECTOR DE MONEDA ── */
.quoter__currency {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.quoter__currency-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Contenedor del switch CLP / USD */
.currency-switch {
  display: flex;
  background-color: var(--color-bg-section);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 3px;
}

/* Botón de moneda individual */
.currency-switch__btn {
  padding: var(--space-2) var(--space-4);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

/* Botón activo (seleccionado) */
.currency-switch__btn--active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

/* ── RESULTADO DEL CÁLCULO ── */
.quoter__result {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(135deg, var(--color-primary-lt), rgba(139, 168, 136, 0.1));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(74, 127, 165, 0.2);
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.3s ease; /* Animación de entrada suave */
}

/* Etiqueta sobre el precio */
.quoter__result-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* Precio grande */
.quoter__result-price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* Nota al pie del precio */
.quoter__result-note {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* ── BOTONES DEL COTIZADOR ── */
.quoter__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Animación fadeInUp para el resultado */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   10. SECCIÓN DE CONTACTO
   ============================================================ */

.contact {
  background-color: var(--color-bg-alt);
}

/* Resumen del viaje cotizado (arriba del formulario) */
.contact__summary {
  max-width: 700px;
  margin: 0 auto var(--space-8);
  background: linear-gradient(135deg, var(--color-primary-lt), var(--color-secondary-lt));
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(74, 127, 165, 0.2);
  font-size: var(--text-sm);
  color: var(--color-text);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ── FORMULARIO DE CONTACTO ── */
.contact__form {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Fila del formulario: 2 columnas lado a lado */
.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* ── SELECTOR DE MÉTODO DE CONTACTO ── */
.contact__method-selector {
  display: flex;
  gap: var(--space-3);
}

/* Cada opción de método (radio button personalizado) */
.method-option {
  flex: 1;
  cursor: pointer;
}

/* Ocultamos el radio button nativo */
.method-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Etiqueta visual del método */
.method-option__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  background-color: var(--color-bg);
}

/* Estado activo del método seleccionado */
.method-option input[type="radio"]:checked + .method-option__label {
  border-color: var(--color-primary);
  background-color: var(--color-primary-lt);
  color: var(--color-primary);
}

/* Ícono de WhatsApp en verde */
.method-option .fa-whatsapp {
  color: #25D366;
}

.contact__form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.contact__form-submit .btn {
  width: 100%;
  max-width: 380px;
  justify-content: center;
}

/* Texto legal pequeño debajo del botón */
.contact__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-align: center;
}


/* ============================================================
   11. FOOTER
   ============================================================ */

.footer {
  background-color: var(--color-text); /* Fondo oscuro (casi negro) */
  color: rgba(255, 255, 255, 0.65);
}

/* Footer más compacto: 2 columnas, brand izquierda, contacto derecha */
.footer__inner {
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Contacto alineado a la derecha */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: right;
}

.footer__contact p {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.footer__contact i {
  width: 16px;
  color: var(--color-primary);
  order: 1; /* mueve el ícono a la derecha del texto */
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
  order: 0; /* texto va primero */
}

.footer__contact a:hover { color: #FFFFFF; }

.footer__nav-title {
  text-align: right;
}

/* Columna de contacto del footer */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__contact p {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer__contact i {
  width: 16px;
  color: var(--color-primary);
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}
.footer__contact a:hover { color: #FFFFFF; }

/* Barra de copyright */
.footer__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
}

/* ── Crédito del desarrollador en el footer ── */
.footer__dev {
  margin-right: 70px;
  color: var(--color-primary);
  font-size: var(--text-xs);
}

.footer__dev-tag {
  font-family: 'Courier New', monospace;
  font-weight: 900;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.footer__dev a:hover .footer__dev-tag {
  color: #243dbc;
}

/* ============================================================
   12. BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */

/* Botón verde fijo en la esquina inferior derecha */
.whatsapp-float {
  position: fixed !important;
  bottom: var(--space-6) !important;
  right: var(--space-6) !important;
  z-index: 9999 !important;
  width: 56px;
  height: 56px;
  background-color: #25D366; /* Verde oficial de WhatsApp */
  border-radius: var(--radius-full);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition: all var(--transition-normal);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
}

/* Tooltip que aparece al hacer hover sobre el botón */
.whatsapp-float__tooltip {
  position: absolute;
  right: 70px;
  background-color: var(--color-text);
  color: #FFFFFF;
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

/* Triángulo del tooltip */
.whatsapp-float__tooltip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--color-text);
  border-right: 0;
}

.whatsapp-float:hover .whatsapp-float__tooltip {
  opacity: 1;
}

/* ============================================================
   13. MEDIA QUERIES (DISEÑO RESPONSIVO)
   Breakpoints:
   - < 1024px: Tablet (2 columnas donde había 3)
   - < 768px: Móvil (1 columna, menú hamburguesa)
   ============================================================ */

/* ── TABLET (menos de 1024px) ── */
@media (max-width: 1024px) {

  /* Reducir tamaño del título del hero en tablet */
  .hero__title {
    font-size: var(--text-4xl);
  }

  /* Vehículos: de 3 columnas a 1 fila de 3 (mismo, pero con menos gap) */
  .vehicles__grid {
    gap: var(--space-4);
  }

  /* Políticas: de 3 a 2 columnas */
  .policies__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Galería: reorganizar en 2 columnas */
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-item--large {
    grid-column: span 2; /* Foto de aeropuerto ocupa todo el ancho */
    grid-row: span 1;
    min-height: 300px;
  }
  .gallery-item--tall {
    grid-row: span 1;
  }

  /* Footer: de 3 a 2 columnas */
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  /* Cotizador: de 3 a 2 columnas + km abajo */
  .quoter__fields {
    grid-template-columns: 1fr 1fr;
  }
  .quoter__fields .form-group:last-child {
    grid-column: span 2;
  }
  .quoter__extras {
    grid-template-columns: repeat(2, 1fr); 
  }
}

/* ── MÓVIL (menos de 768px) ── */
    /* En desktop el select se oculta */
  .currency-select-mobile {
    display: none;
  }

@media (max-width: 768px) {

  /* Reducir variables en móvil */
  :root {
    --container-pad: var(--space-4);
  }

  /* ── Navbar en móvil ── */
  /* Mostrar botón hamburguesa */
  .navbar__toggle {
    display: flex;
  }

  /* El menú se convierte en un panel desplegable */
  .navbar__menu {
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-2);
    box-shadow: var(--shadow-lg);
    /* Oculto por defecto, se muestra con JS al presionar hamburguesa */
    display: none;
  }
  .navbar__menu.navbar__menu--open {
    display: flex;
  }

  /* Lista de enlaces: vertical en móvil */
  .navbar__list {
    flex-direction: column;
    align-items: stretch;
  }
  .navbar__link {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
  }
  .navbar__cta {
    text-align: center;
  }

  /* ── Hero en móvil ── */
  .hero__title {
    font-size: var(--text-3xl);
  }
  .hero__subtitle {
    font-size: var(--text-base);
  }
  .hero__actions {
    flex-direction: column;
  }
  .hero__trust {
    gap: var(--space-4);
  }

  /* ── Secciones: reducir padding ── */
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  /* ── Vehículos: 1 columna ── */
  .vehicles__grid {
    grid-template-columns: 1fr;
  }

  /* ── Galería: 1 columna ── */
  /* ── Galería: oculta grid, muestra slider ── */
  .gallery__grid {
    display: none;
  }

  .gallery__slider-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    width: 100%;
  }

  .gallery__track {
    display: flex;
    width: 100%;
    transition: transform 0.4s ease;
    will-change: transform;
  }

  .gallery__track .gallery-item,
  .gallery__track .gallery-item--large,
  .gallery__track .gallery-item--tall {
    min-width: 100%;
    height: 280px;
    flex-shrink: 0;
  }

  .gallery__arrow {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: var(--radius-full);
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-fast);
  }

  .gallery__arrow--prev { left: var(--space-3); }
  .gallery__arrow--next { right: var(--space-3); }

  .gallery__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  .gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
  }

  .gallery__dot--active {
    background: var(--color-primary);
    width: 24px;
  }

  /* ── Políticas: 1 columna ── */
  .policies__grid {
    grid-template-columns: 1fr;
  }

  /* ── Cotizador: 1 columna ── */
  .quoter__card {
    padding: var(--space-6);
  }
  .quoter__fields {
    grid-template-columns: 1fr;
  }
  .quoter__fields .form-group:last-child {
    grid-column: span 1;
  }
  .quoter__actions {
    flex-direction: column;
  }
  .quoter__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .quoter__extras {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .quoter__extras .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .quoter__extras .form-label {
    min-height: 40px;
    align-items: flex-start;
  }

  .quoter__extras .number-input {
    height: 44px;
  }
  /* ── Contacto: 1 columna ── */
  .contact__form-row {
    grid-template-columns: 1fr;
  }
  .contact__summary {
    grid-template-columns: 1fr;
  }

  /* ── Footer: 1 columna ── */
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .footer__contact {
    text-align: left;
  }

  .footer__contact p {
    justify-content: flex-start;
  }

  .footer__contact i {
    order: 0;
  }

  .footer__contact a {
    order: 1;
  }

  .footer__nav-title {
    text-align: left;
  }

  /* ── Títulos de sección más pequeños ── */
  .section__title {
    font-size: var(--text-2xl);
  }

  .quoter__currency {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .currency-switch {
    display: none; /* Oculta los botones en móvil */
  }

  /* Select desplegable, solo visible en móvil */
  .currency-select-mobile {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: Inter, sans-serif;
    color: var(--color-text);
    background-color: #fff;
    cursor: pointer;
  }
}

/* ── Pantallas muy pequeñas (menos de 480px) ── */
@media (max-width: 480px) {
  .hero__title {
    font-size: var(--text-2xl);
  }
  .quoter__result-price {
    font-size: var(--text-3xl);
  }
}